<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas paint</title>
</head>
<style>
    canvas {
        width: 512px;
        height: 512px;
    }
</style>
<body>
    <canvas width="1600" height="1600"></canvas>
    <script src="https://d3js.org/d3-hierarchy.v1.min.js"></script>
    <script>
        
        const dataSource = 'https://s5.ssl.qhres.com/static/b0695e2dd30daa64.json';
        (async function () {
            const data = await (await fetch(dataSource)).json();
            
            const regions = d3.hierarchy(data)
                .sum(d => 1)
                .sort((a, b) => b.value -a.value)

            const pack = d3.pack()
                .size([1600, 1600])
                .padding(3)

            const root = pack(regions)

            const canvas = document.querySelector('canvas')
            const context = canvas.getContext('2d', {alpha: false})
            context.fillStyle = '#dedede'
            context.fillRect(0, 0, canvas.width, canvas.height)
       

            const TAU = 2 * Math.PI;

            function draw(ctx, node, {fillStyle = 'rgba(0, 0, 0, 0.2)', textColor = 'white'} = {}) {
                const children = node.children;
                const {x, y, r} = node;
                ctx.fillStyle = fillStyle;
                ctx.beginPath();
                ctx.arc(x, y, r, 0, TAU);
                ctx.fill();
                if(children) {
                    for(let i = 0; i < children.length; i++) {
                        draw(context, children[i]);
                    }
                } else {
                    const name = node.data.name;
                    ctx.fillStyle = textColor;
                    ctx.font = '1.5rem Arial';
                    ctx.textAlign = 'center';
                    ctx.fillText(name, x, y);
                }
            }


            draw(context, root)

        }());



    </script>
</body>
</html>